<template>
  <view class="container">
	<view class="snav">
	  <text class="off" v-if="page==0" @click="page=4">{{navList[4]}}</text>
	  <text class="off" v-else @click="page--">{{navList[page-1]}}</text>
	  <text class="arrow">
		  <uni-icons v-if="page>0" type="left" size="16" @click="page--" color="white"></uni-icons>
		  <uni-icons v-else type="left" size="16" @click="page=4" color="white"></uni-icons>
	  </text>
	  <text class="on">{{navList[page]}}</text>
	  <text class="arrow">
		  <uni-icons v-if="page<4" type="right" size="16" @click="page++" color="white"></uni-icons>
		  <uni-icons v-else type="right" size="16" @click="page=0" color="white"></uni-icons>
	  </text>
	  <text class="off" v-if="page==4" @click="page=0">{{navList[0]}}</text>
	  <text class="off" v-else @click="page++">{{navList[page+1]}}</text>
	</view>
    <swiper class="swiper" circular="true" :current="page" @change="swiper">
      <swiper-item key='0'>
		<ServiceOpen />
      </swiper-item>
      <swiper-item key='1'>
		<ServiceMap />
      </swiper-item>
      <swiper-item key='2'>
		<ServiceBuilding />
      </swiper-item>
      <swiper-item key='3'>
		<ServiceAttention />
      </swiper-item>
      <swiper-item key='4'>
        <ServiceOther />
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
  import ServiceOpen from './components/service-open.vue'
  import ServiceMap from './components/service-map.vue'
  import ServiceBuilding from './components/service-building.vue'
  import ServiceAttention from './components/service-attention.vue'
  import ServiceOther from './components/service-other.vue'
  export default {
	components:{
	  ServiceOpen,
	  ServiceMap,
	  ServiceBuilding,
	  ServiceAttention,
	  ServiceOther
	},
    data() {
      return {
		page: 0,
        navList:['服务信息','交通信息','展厅信息','参观须知','便民服务']
      }
    },
	methods:{
		swiper(evt){
			this.page = evt.detail.current
		}
	}
  }
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	.snav{
		background-color:#721b28;
		position: absolute;
		border-bottom: solid 1px #eee;
		left:0px;
		top:0px;
		height: 70upx;
		padding: 15upx 0upx 15upx 0upx;
		display: flex;
		justify-content: space-between;
		width:100%;
		.on{
			color:white;
			width: 36%;
			text-align: center;
			font-size:40upx;  
			padding-top: 7upx;
			// text-shadow: 10px 10px 10px #999;
		}
		.off{
			color:#fcc;
			width: 27%;
			font-size:30upx;
			text-align: center;
			padding-top: 15upx;
			// text-shadow: 8px 8px 8px #cba;
		}
		.arrow{
			width:5%;
			text-align: center;
			padding-top: 15upx;
		}
	}
	.swiper {
		margin-top: 100upx;
		width: 100%;
		height: calc( 100vh - 50px - 100upx );
		background-color: #f5f4ee;
		overflow:hidden;
	}
}
</style>